<script setup>
import {useRoute,useRouter} from 'vue-router'
import {onMounted,ref,reactive } from 'vue'
import {findById} from '@/api/elderInfo'
import {
  Document,
  User,
  Ticket,
  UserFilled,
  Male,
  Female,
  Wallet,
  Money,
  Medal,
  Coin,
  Monitor,
  FirstAidKit,
  List,
  Calendar,
  LocationInformation,
  Phone,
  Location,
  Clock,
  Refresh,
  Back
} from '@element-plus/icons-vue'

const route =useRoute()
const router =useRouter()
const loading = ref(false)
onMounted(()=>{
    const id =route.query.id
    findById(id).then((res)=>{
        adminView.value=res.data
    })
})
const adminView =ref({})

const handleBack=()=>{
    router.back()
}

// 格式化日期时间
const formatDateTime = (dateString) => {
  if (!dateString) return ''
  const date = new Date(dateString)
  return date.toLocaleString()
}
const positionMap = reactive({
  1: '运营经理',
  2: '护工',
  3: '护士',
  4: '厨师',
  5: '行政人员',
  6: '医生',
  7: '其他'
});
const getHealthStatusBadge = (status) => {
  switch (status) {
    case 1:
      return { class: 'badge-success', text: '良好' }
    case 2:
      return { class: 'badge-primary', text: '一般' }
    case 3:
      return { class: 'badge-warning', text: '较差' }
    case 4:
      return { class: 'badge-danger', text: '病重' }
    default:
      return { class: 'badge-default', text: '未知' }
  }
}
</script>

<template>
  <div class="page-container">
    <el-card class="header-card">
      <h1 class="page-title">
        <el-icon class="title-icon"><Document /></el-icon>
        客户详细信息
      </h1>
    </el-card>

    <div class="content-container">
      <el-card class="info-card">
        <div class="card-header">
          <h2><el-icon><User /></el-icon> 基本信息</h2>
        </div>

        <div class="card-body">
          <div class="info-grid">
            <div class="info-section">
              <div class="info-group fade-in">
                <div class="info-group-title">
                  <el-icon><Ticket /></el-icon>
                  <span>身份信息</span>
                </div>

                <div class="info-item fade-in delay-1">
                  <span class="info-label">
                    <el-icon><Document /></el-icon>
                    客户编号：
                  </span>
                  <span class="info-value">
                    <span class="badge badge-primary">EL-{{ adminView.elderlyId || '--' }}</span>
                  </span>
                </div>

                <div class="info-item fade-in delay-2">
                  <span class="info-label">
                    <el-icon><UserFilled /></el-icon>
                    客户名称：
                  </span>
                  <span class="info-value">
                    {{ adminView.name || '--' }}
                  </span>
                </div>

                <div class="info-item fade-in delay-1">
                  <span class="info-label">
                    <el-icon><Male /></el-icon>
                    性别：
                  </span>
                  <span class="info-value">
                    <template v-if="adminView.gender === 1">
                      <el-icon color="#3b82f6"><Male /></el-icon> 男
                    </template>
                    <template v-else-if="adminView.gender === 2">
                      <el-icon color="#ec4899"><Female /></el-icon> 女
                    </template>
                    <template v-else>--</template>
                  </span>
                </div>
              </div>
            </div>
          </div>

          <div class="info-grid">
            <div class="info-section">
              <div class="info-group fade-in">
                <div class="info-group-title">
                  <el-icon><Monitor /></el-icon>
                  <span>健康信息</span>
                </div>

                <div class="info-item fade-in delay-1">
                  <span class="info-label">
                    <el-icon><FirstAidKit /></el-icon>
                    健康状态：
                  </span>
                  <span class="info-value">
                    <template v-if="adminView.healthStatus">
                      <span :class="`badge ${getHealthStatusBadge(adminView.healthStatus).class}`">
                        {{ getHealthStatusBadge(adminView.healthStatus).text }}
                      </span>
                    </template>
                    <template v-else>--</template>
                  </span>
                </div>
              </div>
            </div>

          </div>

          <div class="time-info fade-in delay-2">
            <div class="info-group">
              <div class="info-group-title">
                <el-icon><Clock /></el-icon>
                <span>系统信息</span>
              </div>

              <div class="info-item">
                <span class="info-label">
                  <el-icon><Time /></el-icon>
                  创建时间：
                </span>
                <span class="info-value">
                  {{ formatDateTime(adminView.createTime) || '--' }}
                </span>
              </div>

              <div class="info-item">
                <span class="info-label">
                  <el-icon><Refresh /></el-icon>
                  更新时间：
                </span>
                <span class="info-value">
                  {{ formatDateTime(adminView.updateTime) || '--' }}
                </span>
              </div>
            </div>
          </div>
        </div>

        <div class="loading-overlay" v-if="loading">
          <div class="spinner"></div>
        </div>
      </el-card>

      <div class="action-buttons">
        <el-button type="primary" @click="handleBack" class="back-button">
          <el-icon class="button-icon"><Back /></el-icon>
          返回列表
        </el-button>
      </div>
    </div>
  </div>
</template>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', Arial, sans-serif;
}

:root {
  --primary: #5b6bf0;
  --primary-light: #f0f2ff;
  --primary-gradient: linear-gradient(135deg, var(--primary), #7b8aff);
  --secondary: #10b9e9;
  --success: #10c891;
  --warning: #ffb020;
  --danger: #ff4d4f;
  --dark: #1a1f36;
  --light: #f8fafd;
  --gray: #6b7280;
  --border: #e5e7eb;
  --card-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.page-container {
  max-width: 1200px;
  margin: 24px auto;
  padding: 0 24px;
}

/* 顶部标题卡片 - 更精致的渐变和阴影 */
.header-card {
  background: var(--primary-gradient);
  border-radius: 18px;
  box-shadow: 0 8px 32px rgba(91, 107, 240, 0.2);
  margin-bottom: 32px;
  border: none;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.header-card::before {
  content: '';
  position: absolute;
  top: -80px;
  right: -80px;
  width: 200px;
  height: 200px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  z-index: -1;
}

.header-card::after {
  content: '';
  position: absolute;
  bottom: -50px;
  left: -50px;
  width: 140px;
  height: 140px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  z-index: -1;
}

.page-title {
  text-align: center;
  color: white;
  font-size: 28px;
  font-weight: 600;
  padding: 28px 24px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.title-icon {
  margin-right: 16px;
  font-size: 34px;
  background: rgba(255, 255, 255, 0.25);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* 内容卡片 - 更柔和的阴影和边框 */
.content-container {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.info-card {
  background: white;
  border-radius: 18px;
  box-shadow: var(--card-shadow);
  border: 1px solid rgba(0, 0, 0, 0.03);
  overflow: hidden;
  transition: var(--transition);
  position: relative;
}

.info-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 36px rgba(91, 107, 240, 0.18);
}

.card-header {
  padding: 22px 32px;
  background: var(--primary-light);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
}

.card-header h2 {
  font-size: 20px;
  font-weight: 600;
  color: var(--primary);
  display: flex;
  align-items: center;
  gap: 12px;
  letter-spacing: 0.5px;
}

.card-body {
  padding: 32px;
}

/* 信息布局 - 更精致的间距和视觉效果 */
.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 32px;
}

.info-section {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.info-group {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.info-group-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--primary);
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px dashed rgba(91, 107, 240, 0.3);
  margin-bottom: 4px;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 0;
}

.info-label {
  min-width: 130px;
  font-weight: 500;
  color: var(--gray);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
}

.info-value {
  font-weight: 500;
  color: var(--dark);
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
}

/* 徽章样式 - 更精致的圆角和阴影 */
.badge {
  padding: 5px 14px;
  border-radius: 24px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.3px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.badge-primary {
  background: rgba(91, 107, 240, 0.12);
  color: var(--primary);
}

.badge-success {
  background: rgba(16, 200, 145, 0.12);
  color: var(--success);
}

.badge-warning {
  background: rgba(255, 176, 32, 0.12);
  color: var(--warning);
}

.badge-danger {
  background: rgba(255, 77, 79, 0.12);
  color: var(--danger);
}

/* 时间信息 - 更优雅的分隔线 */
.time-info {
  margin-top: 24px;
  padding-top: 28px;
  border-top: 1px dashed rgba(0, 0, 0, 0.08);
}

/* 操作按钮 - 更精致的3D效果 */
.action-buttons {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}

.back-button {
  padding: 13px 36px;
  font-size: 16px;
  font-weight: 500;
  border-radius: 14px;
  transition: var(--transition);
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 4px 16px rgba(91, 107, 240, 0.25);
  letter-spacing: 0.5px;
  border: none;
}

.back-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(91, 107, 240, 0.35);
}

/* 加载状态 - 更现代的动画效果 */
.loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  z-index: 10;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.spinner {
  width: 56px;
  height: 56px;
  border: 4px solid var(--primary-light);
  border-top: 4px solid var(--primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  box-shadow: 0 4px 12px rgba(91, 107, 240, 0.2);
}

/* 动画效果 - 更流畅的过渡 */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.fade-in {
  animation: fadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.delay-1 { animation-delay: 0.15s; }
.delay-2 { animation-delay: 0.3s; }

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 响应式设计 - 更细致的断点调整 */
@media (max-width: 992px) {
  .info-grid {
    gap: 28px;
  }
  
  .card-body {
    padding: 28px;
  }
}

@media (max-width: 768px) {
  .page-container {
    padding: 0 20px;
  }
  
  .info-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  
  .page-title {
    font-size: 24px;
    padding: 24px 20px;
  }
  
  .title-icon {
    width: 56px;
    height: 56px;
    font-size: 28px;
  }
  
  .card-header {
    padding: 20px 28px;
  }
  
  .card-body {
    padding: 24px;
  }
  
  .back-button {
    padding: 12px 32px;
  }
}

@media (max-width: 480px) {
  .page-container {
    padding: 0 16px;
  }
  
  .header-card {
    border-radius: 16px;
    margin-bottom: 24px;
  }
  
  .page-title {
    font-size: 22px;
    padding: 22px 16px;
  }
  
  .title-icon {
    width: 48px;
    height: 48px;
    font-size: 24px;
    margin-right: 12px;
  }
  
  .info-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  
  .info-label {
    min-width: unset;
    font-size: 14px;
  }
  
  .info-value {
    font-size: 14px;
    padding-left: 28px;
  }
  
  .back-button {
    width: 100%;
    justify-content: center;
  }
}

/* 微交互增强 */
.el-icon {
  transition: var(--transition);
}

.info-item:hover .el-icon {
  transform: scale(1.1);
}

.badge {
  transition: var(--transition);
}

.badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
</style>